<template>
    <div class="login">
        <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="账号" prop="user">
                <el-input
                    type="text"
                    v-model="ruleForm.user"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input
                    type="password"
                    v-model="ruleForm.pass"
                    autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                    >登录</el-button
                >
            </el-form-item>
        </el-form>
        
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            ruleForm: {
                user: '',
                pass: '',
            },
        }
    },
    methods: {
        ...mapMutations(['setUserData']),
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$api.login(this.ruleForm).then((res) => {
                        if (res.code == 1) {
                            this.$router.push('/')
                            this.setUserData(res.data)
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data,
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
    },
}
</script>

<style>
</style>